<template>
  <div class="echarts-outer-wrapper width-620">
    <Title title="案件办理环节情况" dw="单位：件"></Title>
    <div class="echart-tab-wrapper">
      <div class="tabs">
        <div
          class="tab-item"
          :class="{ select: select === 0 }"
          @click="changeSelect(0)"
        >
          检查
        </div>
        <div
          class="tab-item"
          :class="{ select: select === 1 }"
          @click="changeSelect(1)"
        >
          审理
        </div>
        <div
          class="tab-item"
          :class="{ select: select === 2 }"
          @click="changeSelect(2)"
        >
          执行
        </div>
        <div
          class="tab-item"
          :class="{ select: select === 3 }"
          @click="changeSelect(3)"
        >
          结案
        </div>
      </div>
    </div>
    <div class="echart-wrapper">
      <img src="~@/assets/images/bg-3d.png" class="echart-bg" />
      <div class="chart" ref="echart"></div>
      <div class="bg"></div>
    </div>
  </div>
</template>

<script>
import Title from "@/components/title";
import * as echarts from "echarts";
import "echarts-gl";
import { getPie3D, getParametricEquation } from "./pieChart-audit";

const color = ["#FEC024 ", "#A5E0FF", "#16FFB7", "#BF0029"];

export default {
  name: "ajblhjqk",
  components: {
    Title,
  },
  data() {
    return {
      prevDate: null,
      EchartData: null,
      select: 0,
      myChart: null,
      option: {},
    };
  },
  created() {
    let date = "";
    let month = new Date().getMonth() + 1;
    let year = new Date().getFullYear();
    date = year + "-" + month;
    this.prevDate = date;
  },
  mounted() {
    this.myChart = echarts.init(this.$refs.echart);
    this.ajax({
      url: "/dpzsJccxService/ajblhjqkQuery",
      method: "post",
      data: {
        param: {
          swjg: this.$route.query.qx_swjg_dm,
          tjny: this.prevDate,
        },
      },
    }).then((res) => {
      res = res.data;
      if (res.rtnCode !== "200") {
        this.$message.error(res.rtnMsg);
        return;
      }
      this.EchartData = [
        [
          {
            name: "待检查",
            value: res.data.jchj.djcsl,
          },
          {
            name: "正在检查",
            value: res.data.jchj.zzjcsl,
          },
          {
            name: "补正/补充调查",
            value: res.data.jchj.bcdcsl,
          },
          {
            name: "终止调查",
            value: res.data.jchj.zzdcsl,
          },
        ],
        [
          {
            name: "待审理",
            value: res.data.slhj.dslsl,
          },
          {
            name: "正在审理",
            value: res.data.slhj.zzslsl,
          },
        ],
        [
          {
            name: "待执行",
            value: res.data.zxhj.dzxsl,
          },
          {
            name: "正在执行",
            value: res.data.zxhj.zzzxsl,
          },
        ],
        [
          {
            name: "执行完毕",
            value: res.data.jahj.zzwbsl,
          },
          {
            name: "终结检查",
            value: res.data.jahj.zjjcsl,
          },
        ],
      ];
      this.setLabel();
      this.initEchart();
    });
  },
  methods: {
    changeSelect(index) {
      this.select = index;
      this.setLabel();
      this.initEchart();
    },
    setLabel() {
      this.EchartData[this.select].forEach((item, index) => {
        item.itemStyle = {
          color: color[index],
        };
        item.label = {
          normal: {
            show: true,
            position: "inside",
            color: color[index],
            formatter: ["{d|{d}%}"].join("\n"), // 用\n来换行
            rich: {
              d: {
                color: "#ffffff",
                align: "left",
                fontSize: 17,
              },
            },
          },
        };
        item.labelLine = {
          show: false,
        };
      });
    },
    // 图表初始化
    initEchart() {
      this.myChart.clear();
      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细 第二个参数传0就是饼图
      this.option = getPie3D(this.EchartData[this.select], 0, 280, 28, 26, 0.8);
      this.myChart.setOption(this.option);
      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
      this.option.series.push({
        name: "税务状态", //自己根据场景修改
        backgroundColor: "transparent",
        type: "pie",
        label: {
          opacity: 1,
          fontSize: 17,
          lineHeight: 20,
        },
        startAngle: -40, // 起始角度，支持范围[0, 360]。
        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
        radius: ["20%", "50%"],
        center: ["36%", "45%"],
        data: this.EchartData[this.select],
        itemStyle: {
          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
        },
      });
      this.myChart.setOption(this.option);
      this.bindListen(this.myChart);
    },
    // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
    // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
    bindListen(myChart, optionName = "option") {
      let selectedIndex = "";
      let hoveredIndex = "";
      // 监听点击事件，实现选中效果（单选）
      myChart.on("click", (params) => {
        // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
        const isSelected =
          !this[optionName].series[params.seriesIndex].pieStatus.selected;
        const isHovered =
          this[optionName].series[params.seriesIndex].pieStatus.hovered;
        const k = this[optionName].series[params.seriesIndex].pieStatus.k;
        const startRatio =
          this[optionName].series[params.seriesIndex].pieData.startRatio;
        const endRatio =
          this[optionName].series[params.seriesIndex].pieData.endRatio;
        // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
        if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
          this[optionName].series[selectedIndex].parametricEquation =
            getParametricEquation(
              this[optionName].series[selectedIndex].pieData.startRatio,
              this[optionName].series[selectedIndex].pieData.endRatio,
              false,
              false,
              k,
              this[optionName].series[selectedIndex].pieData.value
            );
          this[optionName].series[selectedIndex].pieStatus.selected = false;
        }
        // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
        this[optionName].series[params.seriesIndex].parametricEquation =
          getParametricEquation(
            startRatio,
            endRatio,
            isSelected,
            isHovered,
            k,
            this[optionName].series[params.seriesIndex].pieData.value
          );
        this[optionName].series[params.seriesIndex].pieStatus.selected =
          isSelected;
        // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
        selectedIndex = isSelected ? params.seriesIndex : null;
        // 使用更新后的 option，渲染图表
        myChart.setOption(this[optionName]);
      });
      // 监听 mouseover，近似实现高亮（放大）效果
      myChart.on("mouseover", (params) => {
        // 准备重新渲染扇形所需的参数
        let isSelected;
        let isHovered;
        let startRatio;
        let endRatio;
        let k;
        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
        if (hoveredIndex === params.seriesIndex) {
          // 否则进行高亮及必要的取消高亮操作
        } else {
          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
          if (hoveredIndex !== "") {
            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
            isSelected =
              this[optionName].series[hoveredIndex].pieStatus.selected;
            isHovered = false;
            startRatio =
              this[optionName].series[hoveredIndex].pieData.startRatio;
            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
            k = this[optionName].series[hoveredIndex].pieStatus.k;
            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
            this[optionName].series[hoveredIndex].parametricEquation =
              getParametricEquation(
                startRatio,
                endRatio,
                isSelected,
                isHovered,
                k,
                this[optionName].series[hoveredIndex].pieData.value
              );
            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
            hoveredIndex = "";
          }
          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
          if (
            params.seriesName !== "mouseoutSeries" &&
            params.seriesName !== "pie2d"
          ) {
            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
            isSelected =
              this[optionName].series[params.seriesIndex].pieStatus.selected;
            isHovered = true;
            startRatio =
              this[optionName].series[params.seriesIndex].pieData.startRatio;
            endRatio =
              this[optionName].series[params.seriesIndex].pieData.endRatio;
            k = this[optionName].series[params.seriesIndex].pieStatus.k;
            // 对当前点击的扇形，执行高亮操作（对 option 更新）
            this[optionName].series[params.seriesIndex].parametricEquation =
              getParametricEquation(
                startRatio,
                endRatio,
                isSelected,
                isHovered,
                k,
                this[optionName].series[params.seriesIndex].pieData.value + 60
              );
            this[optionName].series[params.seriesIndex].pieStatus.hovered =
              isHovered;
            // 记录上次高亮的扇形对应的系列号 seriesIndex
            hoveredIndex = params.seriesIndex;
          }
          // 使用更新后的 option，渲染图表
          myChart.setOption(this[optionName]);
        }
      });
      // 修正取消高亮失败的 bug
      myChart.on("globalout", () => {
        // 准备重新渲染扇形所需的参数
        let isSelected;
        let isHovered;
        let startRatio;
        let endRatio;
        let k;
        if (hoveredIndex !== "") {
          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
          isHovered = false;
          k = this[optionName].series[hoveredIndex].pieStatus.k;
          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
          this[optionName].series[hoveredIndex].parametricEquation =
            getParametricEquation(
              startRatio,
              endRatio,
              isSelected,
              isHovered,
              k,
              this[optionName].series[hoveredIndex].pieData.value
            );
          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
          hoveredIndex = "";
        }
        // 使用更新后的 option，渲染图表
        myChart.setOption(this[optionName]);
      });
    },
  },
};
</script>

<style scoped lang="scss">
.echarts-outer-wrapper {
  width: 536px;
  height: 476px;
  position: relative;
  .danwei {
    position: absolute;
    top: 60px;
    right: 110px;
    font-size: 14px;
    color: #b3d3e5;
  }
}
.echart-wrapper {
  position: relative;
  height: 300px;
  .echart-bg {
    position: absolute;
    position: absolute;
    width: 340px;
    top: 140px;
    left: 10px;
  }
  .chart {
    height: 100%;
  }
}
</style>
